<template>
    <view>
        <view class="type_sel">
            <text :class="index === 0 ? 'active' : ''" :data-index="0" @tap="chuangType">手牌模式</text>
            <text :class="index === 1 ? 'active' : ''" :data-index="1" @tap="chuangType">房间模式</text>
        </view>
        <view v-if="index === 0">
            <view class="status_box">
                <text class="title">简单，无需设置，直接可用，适合大部分门店使用</text>
                <text class="subtitle">(同时只能启动一种模式）</text>
                <view :class="'status_btn ' + (selStatus === 1 ? 'sel_btn' : '')" @tap="posteditHangOrder">
                    <text>{{ selStatus === 1 ? '启用中' : '点击启用' }}</text>
                </view>
            </view>
            <view class="phone_bg">
                <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/phone_bg.png" mode="" />
            </view>
            <view class="add_floor_1">
                <text>意约推荐，无需设置，直接使用</text>
            </view>
        </view>
        <view v-if="index === 1">
            <view class="status_box">
                <text class="title">简单，无需设置，直接可用，适合大部分门店使用</text>
                <text class="subtitle">(同时只能启动一种模式）</text>
                <view :class="'status_btn  ' + (selStatus === 2 ? 'sel_btn' : '')" @tap="posteditHangOrder">
                    <text>{{ selStatus === 2 ? '启用中' : '点击启用' }}</text>
                </view>
            </view>
            <view class="room_title">
                <text>房间设置：</text>
            </view>
            <view class="floor_box" v-for="(item, index) in hangOrderList" :key="index">
                <view class="floor_t">
                    <view class="floor_t_l">
                        <view></view>
                        <text>{{ item.floor }}</text>
                    </view>
                    <view class="floor_t_r" :data-id="item.id" :data-floor="item.floor" :data-type="2" @tap="showDelModelOrder">
                        <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/edit_icon.png" mode="" />
                    </view>
                </view>

                <view class="floor_b">
                    <view class="floor_b_l">
                        <view
                            class="num_box"
                            :data-id="item.id"
                            :data-floor="i.brand"
                            :data-brandid="i.id"
                            :data-type="4"
                            @tap="showDelModelOrder"
                            v-for="(i, id) in item.settings"
                            :key="i.id"
                        >
                            <text>{{ i.brand }}</text>
                        </view>
                    </view>
                    <view class="floor_b_r" :data-id="item.id" :data-type="3" @tap="showDelModelOrder">
                        <text>增加号牌</text>
                        <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/append.png" mode="" />
                    </view>
                </view>
            </view>
            <view class="add_floor" :data-type="1" @tap="showDelModelOrder">
                <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/append.png" mode="" />
                <text>增加楼层</text>
            </view>
        </view>
        <view class="modal-mask2" @tap="hideDelModelOrder" v-if="delModelOrder" @touchmove.stop.prevent="trueFun" style="overflow: visible !important"></view>
        <view v-if="delModelOrder" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
            <view class="modal-content-showModalhandbrand" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
                <view class="qrcodebox">
                    <view class="qrcodetextbox">
                        <view class="time-box2qm">
                            <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_lt.png"></image>
                            <view class="qrcodetext">{{ titleClone }}</view>
                            <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_rl.png"></image>
                        </view>
                        <image class="done" @tap="hideDelModelOrder" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/done.png"></image>
                    </view>
                    <view class="content">
                        <view class="sel_date">
                            <input @input="bindInputName" :value="floor" :placeholder="placeholder" />
                        </view>
                        <view class="text_1">说明：{{ text1 }}</view>
                        <view class="text_2">{{ text2 }}</view>
                    </view>
                    <view class="coupon-mai">
                        <view class="cancel-bnt" @tap="hideDelModelOrder">取消</view>
                        <view class="affirm-bnt" @tap="postSavaOrUpdateFloor">确认</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import _request from '../../utils/request';
export default {
    data() {
        return {
            index: 0,
            delModelOrder: false,
            selStatus: 1,
            hangOrderList: [],
            placeholder: '请输入楼层名称',
            title: '新赠楼层',
            text1: '(1)可以填写楼层名称或房间名称',
            text2: '(2)最多填写15个字',
            floor: '',
            type: 1,
            floorId: '',
            brandId: '',

            i: {
                brand: '',
                id: ''
            },

            titleClone: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getHangOrderInfo(1);
    },
    methods: {
        chuangType(e) {
            this.setData({
                index: e.currentTarget.dataset.index
            });
            this.getHangOrderInfo(e.currentTarget.dataset.index === 1 ? 2 : 1);
        },

        hideDelModelOrder() {
            this.setData({
                delModelOrder: false
            });
        },

        showDelModelOrder(e) {
            this.setData({
                delModelOrder: true,
                type: e.currentTarget.dataset.type,
                floorId: e.currentTarget.dataset.id,
                brandId: e.currentTarget.dataset.brandid,
                floor: ''
            });

            if (e.currentTarget.dataset.type === 1) {
                this.setData({
                    placeholder: '请输入楼层名称',
                    title: '新赠楼层',
                    text1: '(1)可以填写楼层名称或房间名称',
                    text2: '(2)最多填写15个字'
                });
            } else if (e.currentTarget.dataset.type === 2) {
                this.setData({
                    placeholder: '请输入楼层名称',
                    title: '修改楼层',
                    text1: '(1)可以填写楼层名称或房间名称',
                    text2: '(2)最多填写15个字',
                    floor: e.currentTarget.dataset.floor
                });
            } else if (e.currentTarget.dataset.type === 3) {
                this.setData({
                    placeholder: '请输入手牌号/门牌号',
                    title: '新赠号牌',
                    text1: '(1)请输入号牌编号，建议使用数字',
                    text2: '(2)最多填写15个字，号牌编号不要重复'
                });
            } else if (e.currentTarget.dataset.type === 4) {
                this.setData({
                    placeholder: '请输入手牌号/门牌号',
                    title: '编辑号牌',
                    text1: '(1)请输入号牌编号，建议使用数字',
                    text2: '(2)最多填写15个字，号牌编号不要重复',
                    floor: e.currentTarget.dataset.floor
                });
            }
        },

        postSavaOrUpdateFloor() {
            let obj = {};

            if (this.type === 1) {
                obj.floor = this.floor;
            } else if (this.type === 2) {
                obj.floor = this.floor;
                obj.id = this.floorId;
            } else if (this.type === 3) {
                obj.floorId = this.floorId;
                obj.brand = this.floor;
            } else if (this.type === 4) {
                obj.id = this.brandId;
                obj.brand = this.floor;
            }

            let data = {
                shopId: uni.getStorageSync('shopId'),
                type: 2,
                ...obj
            };

            _request.postObj('/hangOrder/savaOrUpdateFloor', data).then((res) => {
                uni.showToast({
                    title: '成功'
                });
                setTimeout(() => {
                    this.setData({
                        delModelOrder: false
                    });
                    this.getHangOrderInfo(2);
                }, 1000);
            });
        },

        bindInputName(e) {
            this.setData({
                floor: e.detail.value
            });
        },

        posteditHangOrder() {
            _request
                .postObj('/hangOrder/editHangOrder', {
                    shopId: uni.getStorageSync('shopId'),
                    hangOrderType: this.index == 0 ? 1 : 2
                })
                .then((res) => {
                    uni.showToast({
                        title: '启用成功'
                    });
                    setTimeout(() => {
                        this.getHangOrderInfo(this.index == 0 ? 1 : 2);
                    }, 1000);
                });
        },

        getHangOrderInfo(type) {
            _request
                .get('/hangOrder/getHangOrder', {
                    shopId: uni.getStorageSync('shopId'),
                    type: type
                })
                .then((res) => {
                    this.setData({
                        hangOrderList: res.data.data.data,
                        selStatus: res.data.data.storeHangOrderType
                    });
                });
        },

        trueFun() {
            console.log('占位：函数 true 未声明');
        }
    }
};
</script>
<style>
.type_sel {
    width: 750rpx;
    height: 94rpx;
    background: #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.type_sel text {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.active {
    font-size: 32rpx !important;
    border-bottom: 8rpx solid #e94a18;
}
.status_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    padding-bottom: 39rpx;
}
.title {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 39rpx;
}
.subtitle {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
    margin-top: 29rpx;
}
.status_btn {
    width: 201rpx;
    height: 67rpx;
    background: #ffffff;
    border: 1rpx solid #dcdcdc;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(102, 102, 102, 0.2);
    border-radius: 33rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 39rpx;
}
.sel_btn {
    background: #e94c19 !important;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(188, 46, 0, 0.2) !important;
}
.sel_btn text {
    color: #fff !important;
}
.status_btn text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}
.room_title {
    margin: 39rpx 0 20rpx 38rpx;
    padding-bottom: 20rpx;
}
.room_title text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #222222;
}

.floor_box {
    width: 670rpx;
    height: 263rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 20rpx auto 0 auto;
}
.floor_t {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #e5e5e5;
}
.floor_t_l {
    display: flex;
    align-items: center;
    margin-left: 23rpx;
}
.floor_t_l view {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
}
.floor_t_l text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #222222;
    margin-left: 12rpx;
}
.floor_t_r {
    margin-right: 20rpx;
}
.floor_t_r image {
    width: 68rpx;
    height: 69rpx;
}
.floor_b {
    display: flex;
    align-items: center;
    height: 162rpx;
    justify-content: space-between;
}
.floor_b_l {
    display: flex;
    align-items: center;
    max-width: 520rpx;
    overflow-x: scroll;
    scrollbar-width: none;
    white-space: nowrap;
}
.num_box {
    background: #eeeeee;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 45rpx;
    padding: 18rpx 17rpx;
}
.num_box text {
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}
.floor_b_r {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20rpx;
}
.floor_b_r text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.floor_b_r image {
    width: 42rpx;
    height: 42rpx;
    margin-top: 15rpx;
}
.add_floor_1 {
    width: 750rpx;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #222222;
    height: 195rpx;
    border-top: 1rpx solid #dcdcdc;
    box-shadow: 2rpx -9rpx 20rpx 0rpx rgba(160, 159, 159, 0.1);
    display: flex;
    justify-content: center;
}
.add_floor_1 text {
    margin-top: 45rpx;
}
.phone_bg {
    height: 600rpx;
    display: flex;
    justify-content: center;
    margin-top: 150rpx;
}
.phone_bg image {
    width: 377rpx;
    height: 575rpx;
    margin-top: 27rpx;
}
.add_floor {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.add_floor text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    margin-top: 19rpx;
}
.add_floor image {
    width: 54rpx;
    height: 54rpx;
    margin-top: 54rpx;
}

.modal-mask2 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden !important;
    z-index: 9999;
    color: #fff;
}
.modal-content-showModalhandbrand {
    position: fixed;
    top: 280rpx;
    z-index: 9999;
    width: 670rpx;
    margin-left: 40rpx;
    height: 620rpx;
    overflow: visible !important;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(102, 102, 102, 0.3);
    border-radius: 10rpx;
}
.qrcodetextbox {
    text-align: center;
    height: 113rpx;
    border-bottom: 1rpx solid #e5e5e5;
}
.time-box2qm {
    width: 225rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.time-left {
    width: 21rpx;
    height: 15rpx;
}
.qrcodetext {
    margin: 0 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 113rpx;
}
.done {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
    position: absolute;
    top: 18rpx;
    right: 11rpx;
}
.coupon-mai {
    display: flex;
    height: 67rpx;
    width: 550rpx;
    margin: 0 auto;
    justify-content: space-between;
}

.cancel-bnt {
    text-align: center;
    line-height: 66rpx;
    width: 201rpx;
    height: 67rpx;
    border: 1rpx solid #dcdcdc;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(102, 102, 102, 0.2);
    border-radius: 33rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.affirm-bnt {
    text-align: center;
    line-height: 66rpx;
    width: 200rpx;
    height: 66rpx;
    background: #e94c19;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(188, 46, 0, 0.2);
    border-radius: 33rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.content {
    height: 357rpx;
}
.sel_date {
    height: 99rpx;
    width: 590rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #e5e5e5;
}
.text_1 {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 29rpx;
    margin-left: 41rpx;
}
.text_2 {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 15rpx;
    margin-left: 107rpx;
}
</style>
